<%--
  Created by IntelliJ IDEA.
  User: 87070
  Date: 2022/10/27
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <%--    <a class="layui-btn layui-btn-xs" lay-event="detail" >查看详情</a>--%>

    {{#  if(d.学习焦虑 != '正常' || d.对人焦虑 != '正常' || d.孤独倾向 != '正常' || d.自责倾向 != '正常' || d.过敏倾向 != '正常' || d.身体症状 != '正常' || d.恐怖倾向 != '正常' || d.冲动倾向 != '正常' || d.答卷作废!= '正常' || d.个人指导计划!= '不需要'){ }}
    <a class="layui-btn layui-btn-xs " lay-event="ReturnVisit">回访调查</a>
    {{#  } }}

    <%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>

</script>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div>
    <div style="width: 610px;height:700px;float: left;">
        <div id="main" style="width: 600px;height:300px; "></div>
        <div id="circlemain" style="width: 600px;height:200px; "></div>
        <div id="left" style="width: 600px;height:280px;">
            <table class="layui-hide" id="test" lay-filter = "test"></table>
        </div>
    </div>
    <div id="right" style="width: 1000px; float: left;margin-left:40px">

        <%--查询框--%>
        <%--查询条件--%>
        <form class="layui-form" action="">

            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <%--                <div class="layui-inline">--%>
            <%--                    <label class="layui-form-label">性格颜色</label>--%>
            <%--                    <div class="layui-input-block">--%>
            <%--                        <select name="symptom"  class="layui-select">--%>
            <%--                            <option value="">请选择...</option>--%>
            <%--                            <option value="红色">学习焦虑</option>--%>
            <%--                            <option value="黄色">对人焦虑</option>--%>
            <%--                            <option value="绿色">孤独倾向</option>--%>
            <%--                            <option value="蓝色">自责倾向</option>--%>
            <%--                            <option value="其他">过敏倾向</option>--%>
            <%--                            <option value="其他">身体症状</option>--%>
            <%--                            <option value="其他">恐怖倾向</option>--%>
            <%--                            <option value="其他">冲动倾向</option>--%>
            <%--                            <option value="其他">效度评估</option>--%>
            <%--                        </select>--%>
            <%--                    </div>--%>

            <%--                </div>--%>



            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <%--查询条件结束--%>
        <%--存放一个table--%>
        <table class="layui-hide" id="test2" lay-filter = "test2"></table>
    </div>

</div>
<%--存放一个table--%>
<form class="layui-form" action=""  id="Returnvisit" style="display: none"  lay-filter="updateUserFormFilter">
    <input type="hidden" name="id" >

    <form class="layui-form" action="" >

        <div class="registerbox-title">回访记录</div>
        <div class="layui-form-item">
            <label class="layui-form-label">回访备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">回访内容</label>
            <div class="layui-input-block">
                <textarea name="recond" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSaveUser">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</form>
<script type="text/javascript">



    layui.use(['table','layer','form','jquery','tree'], function(){
        var tree = layui.tree;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        var colordata=[];
        var countdata=[];
        var cicledata=[];
        table.on('tool(test2)',function (obj) {
            if (obj.event === 'ReturnVisit'){
                layer.open({
                    type: 1,
                    area: ['800px', '600px'],
                    offset: '100px',
                    content:$("#Returnvisit"),

                });
            }
        })

        table.on('toolbar(test2)', function(obj){
            var data = obj.data;

            //回访
            form.on('submit(formSaveUser)', function(data){
                var data1 = obj.data;
                var params={};
                params.rid=data1.id;
                params.name=data1.username;
                params.tel=data1.tel;
                params.yqcode=data1.yqcode;
                params.recond=data.field.recond;
                params.remark=data.field.remark;
                // alert(JSON.stringify(data1))
                // alert(JSON.stringify(data1.username))
                alert(JSON.stringify(params))
                $.ajax({
                    url:"${pageContext.request.contextPath}/tMhtSurvey/addSurvey",
                    type:"post",
                    dataType:"JSON",
                    data:params,//表单里所有数据
                    success:function (ret){

                        if (ret.deta==true){
                            layer.msg("修改成功",{icon:"1"});
                            layer.closeAll();
                            $("#saveUserForm").hide();
                            //刷新页面
                            table.reload('test');
                        }

                    }
                })


            });

        })

        table.render({
            // element  元素
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/tMhtRecord/tj' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}
                {type:'numbers',title:'编号'}
                ,{field:'count', title: '人数', sort: true,}
                ,{field:'typeofsymptoms', title: '症状', sort: true,}
            ]],
            done: function(res, curr, count){

                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //alert(JSON.stringify(res.data));

                res.data.forEach(function (item){

                    colordata.push(item.typeofsymptoms);
                    countdata.push(item.count);
                    var obj={};
                    obj["value"]=item.count;
                    obj["name"]=item.typeofsymptoms;
                    cicledata.push(obj);
                })
                // 数据渲染完之后开始显示echart的图
                getEchartPic1();
                getEchartPic2();
            }

        });
        table.render({
            // element  元素
            elem: '#test2'
            ,page:true
            ,limit:10
            ,limits:[10,20,30]
            ,toolbar: '#toolbarDemo'
            ,url:'${pageContext.request.contextPath}/tMhtRecord/tj2' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
            ,cellMinWidth: 140 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                // {type: 'checkbox', fixed: 'left'}
                {type:'numbers',title:'编号'}
                // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'username', title: '用户名', sort: true}
                ,{field:'tel', title: '电话', sort: true}
                ,{field:'createtime', title: '做题时间', sort: true}
                ,{field:'学习焦虑', title: '学习焦虑', sort: true}
                ,{field:'对人焦虑', title: '对人焦虑', sort: true}
                ,{field:'孤独倾向', title: '孤独倾向', sort: true}
                ,{field:'自责倾向', title: '自责倾向', sort: true}
                ,{field:'过敏倾向', title: '过敏倾向', sort: true}
                ,{field:'身体症状', title: '身体症状', sort: true}
                ,{field:'恐怖倾向', title: '恐怖倾向', sort: true}
                ,{field:'冲动倾向', title: '冲动倾向', sort: true}
                ,{field:'答卷作废', title: '答卷作废', sort: true}
                ,{field:'个人指导计划', title: '个人指导计划', sort: true}
                ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]]

        });

        // 查询
        form.on('submit(formDemo)', function(data){
            alert(JSON.stringify(data))
            alert(JSON.stringify(data.field))
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload('test2', {
                where: data.field,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        var getEchartPic1=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '症状分析数据'
                },
                tooltip: {},
                legend: {
                    data: ['症状人数']
                },
                xAxis: {
                    data: colordata
                },
                yAxis: {},
                series: [
                    {
                        name: '症状人数',
                        type: 'bar',
                        data: countdata

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        // 饼状图的填充
        var getEchartPic2=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('circlemain'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '症状测试分析数据',
                    // subtext: '分析数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:["darkred","darkgreen","darkblue","yellow","darkpink","pink","brown","orange","silver","lime"],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data:cicledata
                        // data: [
                        //     { value: 1048, name: 'Search Engine' },
                        //     { value: 735, name: 'Direct' },
                        //     { value: 580, name: 'Email' },
                        //     { value: 484, name: 'Union Ads' },
                        //     { value: 300, name: 'Video Ads' }
                        // ]
                        ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


    })


</script>
</body>


</html>
